<div id="conteudo">
  <h2>${titulo}</h2>
  <ul class="lista-fotos-com-nome">
    <g:each in="${portifolioInstance}">
      <li>
        <a href="${createLink(controller:'principal', action:'album', params:[id:it.id])}" class="iframe" title=" ">
          <img  border="0"  src="${createLink(controller:'portifolio', action:'view', id:it.id)}"/>
        </a>
      </li>
    </g:each>
  </ul>
  <div class="clear"></div>
  <script>
      $(document).ready(function(){
                //Examples of how to assign the ColorBox event to elements
                $(".iframe").colorbox({iframe:true, width:"50%", height:"80%"});
                $(".inline").colorbox({inline:true, width:"60%"});
                $(".callbacks").colorbox({
                          onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                          onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                          onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                          onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                          onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                });
      });
  </script>
</div>
